<script setup lang="ts">
import { ref, onMounted } from "vue";
import { getExternalConversations } from "@/api/external";
import type { ConversationDTO } from "@/api/history";

// 历史记录列表
const records = ref<ConversationDTO[]>([]);
const loading = ref(false);
const error = ref("");

const emit = defineEmits(["recordSelected"]);

// 获取历史记录列表
const fetchHistoryRecords = async () => {
  try {
    loading.value = true;
    error.value = "";
    const response = await getExternalConversations();
    records.value = response.conversations;

    if (records.value.length === 0) {
      error.value = "暂无历史记录";
    }
  } catch (err) {
    console.error("获取历史记录失败:", err);
    error.value = "获取历史记录失败";
  } finally {
    loading.value = false;
  }
};

// 点击历史记录的处理函数
const handleRecordClick = (record: ConversationDTO) => {
  emit("recordSelected", record);
};

// 格式化时间
const formatTime = (dateString: string) => {
  const date = new Date(dateString);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  const hours = String(date.getHours()).padStart(2, "0");
  const minutes = String(date.getMinutes()).padStart(2, "0");
  return `${year}-${month}-${day} ${hours}:${minutes}`;
};

onMounted(() => {
  fetchHistoryRecords();
});

defineExpose({
  fetchHistoryRecords,
});
</script>

<template>
  <div>
    <div class="subhead">
      <div class="text">历史对话</div>
    </div>

    <!-- 加载中状态 -->
    <div v-if="loading" class="loading-container">
      <div class="loading-spinner"></div>
      <div class="loading-text">加载中...</div>
    </div>

    <!-- 错误状态 -->
    <div v-else-if="error" class="error-container">
      <div class="error-icon">⚠</div>
      <div class="error-text">{{ error }}</div>
    </div>

    <!-- 历史记录列表 -->
    <div v-else class="history-list">
      <div class="list-content">
        <div
          v-for="record in records"
          :key="record.id"
          class="history-item"
          @click="handleRecordClick(record)"
        >
          <div class="history-info">
            <div class="history-summary">{{ record.title }}</div>
            <div class="history-type">
              对话 · {{ record.messages?.length || 0 }}条消息
            </div>
          </div>
          <div class="history-time">{{ formatTime(record.updated_at) }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.history-list {
  margin-top: 20px;
  background: linear-gradient(
    135deg,
    rgba(49, 190, 255, 0.08) 0%,
    rgba(49, 190, 255, 0.03) 100%
  );
  border: 1px solid rgba(49, 190, 255, 0.25);
  border-radius: 12px;
  padding: 16px;
  backdrop-filter: blur(10px);

  .list-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(49, 190, 255, 0.2);

    .header-icon {
      font-size: 18px;
    }

    .header-title {
      font-size: 16px;
      font-weight: 600;
      color: #f6f9fe;
      font-family: "Alibaba PuHuiTi", sans-serif;
    }
  }

  .list-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 10px;
    /* 滚动条样式 */
    &::-webkit-scrollbar {
      width: 4px;
    }
    &::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.05);
      border-radius: 2px;
    }
    &::-webkit-scrollbar-thumb {
      background: rgba(49, 190, 255, 0.3);
      border-radius: 2px;
      &:hover {
        background: rgba(49, 190, 255, 0.5);
      }
    }

    .history-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px;
      background: rgba(49, 190, 255, 0.05);
      border-radius: 8px;
      border: 1px solid rgba(49, 190, 255, 0.15);
      transition: all 0.3s ease;
      cursor: pointer;

      &:hover {
        background: rgba(49, 190, 255, 0.1);
        border-color: rgba(49, 190, 255, 0.3);
        transform: translateX(3px);
      }

      .history-info {
        flex: 1;
        margin-right: 12px;
        min-width: 0;

        .history-summary {
          font-size: 13px;
          font-weight: 500;
          color: #f6f9fe;
          margin-bottom: 4px;
          line-height: 1.4;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          word-wrap: break-word;
        }

        .history-type {
          font-size: 11px;
          color: rgba(246, 249, 254, 0.5);
        }
      }

      .history-time {
        font-size: 12px;
        color: #31beff;
        font-weight: 500;
        font-family: "YouSheBiaoTiHei", sans-serif;
        white-space: nowrap;
        flex-shrink: 0;
      }
    }
  }
}

/* 加载和错误状态 */
.loading-container,
.error-container {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 20px;
  background: linear-gradient(
    135deg,
    rgba(49, 190, 255, 0.08) 0%,
    rgba(49, 190, 255, 0.03) 100%
  );
  border: 1px solid rgba(49, 190, 255, 0.25);
  border-radius: 12px;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(49, 190, 255, 0.2);
  border-top-color: #31beff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.loading-text,
.error-text {
  color: rgba(246, 249, 254, 0.6);
  font-size: 14px;
  font-weight: 500;
}

.error-icon {
  font-size: 32px;
  color: rgba(255, 193, 7, 0.8);
}

.error-text {
  color: rgba(255, 193, 7, 0.8);
}
</style>
